<template>
    <div class="music-detail-container">
        <div class="bgc-box"></div>
        <!-- 头部-->
        <Header>
            <router-link to="/index">
                <van-icon name="wap-home-o" size="30px" />
            </router-link>
            <div class="title">
                <div>{{songinfo.title}}</div>
                <div class="author">{{songinfo.author}}</div>
            </div>
            <van-icon name="search" size="30px" />
        </Header>
        <!-- 封面图-->
        <div class="cover">
            <img :src="songinfo.pic_premium" :style="imgStyle"
                 alt="">
        </div>
        <!--歌词-->
        <Lrc v-if="songinfo.lrclink" :lrc-link="songinfo.lrclink" />
        <!--操作去-->
        <div class="action">
            <van-icon v-show="!isLike" name="like-o" size="30px" @click="zan(true)" />
            <van-icon v-show="isLike" name="like" size="30px" color="red" @click="zan(false)" />
            <a v-if="songinfo.title" :href="bitrate.file_link" target="_blank" :download="songinfo.title">
                <van-icon name="down" size="30px" />
            </a>
        </div>
        <!--播放控件-->
        <div class="audio-box">
<!--            <audio ref="audio" @play="handlePlay" @pause="handlePause" controls-->
<!--                   :src="bitrate.show_link"></audio>-->
        </div>

        <button @click="getTime">获取时间</button>
    <button @click="$store.commit('changePlay',{isPlay:false})">隐藏播放</button>
        <button @click="changeT">修改title</button>
        <div>
            {{msg123}}
        </div>
        <div>
            {{title}}
        </div>
        <div>
            {{num}}
        </div>
    </div>
</template>

<script>
    import Lrc from "./components/Lrc";
    // import {getMusicDetail} from "../../api/baidu-music";
    import {Dialog} from 'vant';
    import {mapGetters, mapState} from 'vuex'


    export default {
        name: "MusicDetail",
        components: {
            Lrc
        },
        // mounted() {
        //     this.$refs.audio.addEventListener('timeupdate', () => {
        //         console.log(this.$refs.audio.currentTime);
        //         // 拿到组件的实例
        //         // 修改vuex的数据
        //         this.$store.commit('changeCurrentTime', {currentTime: this.$refs.audio.currentTime})
        //     })
        // },
        methods: {
            getTime() {
                console.log(this.$refs.audio.currentTime);
            },
            changeT() {
                // 修改ttile， 需要触发mutation修改
                this.$store.commit('changeTitle', {title: '李白'})
            },
            // handlePlay() {
            //     console.log('播放了')
            //     this.imgClass = 'img-ani';
            //     this.imgStyle={
            //         'animation-play-state':'running'
            //     }
            // },
            // handlePause() {
            //     console.log("暂停w")
            //
            //     this.imgClass = ''
            //     this.imgStyle={
            //         'animation-play-state':'paused'
            //     }
            // },
            zan(flag) {
                // 调用接口
                if (flag) {
                    this.isLike = flag
                } else {
                    Dialog.confirm({
                        title: '确定取消吗？',
                        message: '您确定要取消点赞吗？',
                    })
                        .then(() => {
                            // on confirm
                            this.isLike = flag
                        })
                        .catch(() => {
                            // on cancel
                        });
                }
            }
        },
        data() {
            return {
                // bitrate: {},
                // songinfo: {},
                isLike: false,
                // imgClass: '',
                // imgStyle: {
                //     'animation-play-state': 'paused'
                // }
            }
        },
        // computed: {
        //     // msg(){
        //     //     return this.$store.state.msg
        //     // },
        //     ...mapState({
        //         msg: 'msg',
        //         title: "title"
        //     })
        // },
        computed: {
            ...mapState({
                msg123: 'msg',
                title: "title",
                bitrate: "bitrate",
                songinfo: "songinfo",
                processTime: "processTime",
                imgStyle:"imgStyle"
            }),
            ...mapGetters({
                num: "num",
                // searchList:"searchList"
            }),
            searchList() {
                return this.$store.getters.searchList
            }
            // nuwsdm(){
            //     return this.$store.getters.num
            // }
        },
        watch: {
            processTime() {
                this.$refs.audio.currentTime = this.processTime;
            }
        },
        created() {
            // console.log("******************************")
            // console.log(this.$store.state.msg)
            // // 请求是异步操作
            // // 1. 请求过来数据之后在加载生命周期函数那
            // getMusicDetail(this.$route.params.id).then(res => {
            //     console.log(res)
            //     this.bitrate = res.bitrate;
            //     this.songinfo = res.songinfo;
            // })

            // dispatch 触发action
            this.$store.dispatch("initSongInfo", {songId: this.$route.params.id})
        }
    }
</script>

<style scoped lang="less">
    .bgc-box {
        position: fixed;
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        background-color: #F1F3F4;
        z-index: -1;
    }

    header {
        display: flex;
        justify-content: space-between;
        padding: 10px;

        .author {
            font-size: 12px;
        }

        .title {
            flex-grow: 1;
            text-align: center;
        }
    }

    .cover {
        padding: 30px 20px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 60%;
            border-radius: 50%;
            animation: rotate 20s linear infinite;
            animation-play-state: paused;
        }
    }

    .img-ani {
        animation: rotate 20s linear infinite;
    }

    @keyframes rotate {
        0% {
            transform: rotateZ(0deg); /*从0度开始*/
        }
        100% {
            transform: rotateZ(360deg); /*360度结束*/
        }
    }

    .action {
        display: flex;
        justify-content: space-between;
    }

    .audio-box {
        display: flex;
        justify-content: center;
    }
</style>
